<!-- 告警详情 》 基本信息 -->

<template>
  <div class="DetailAlarm-AlarmBase">
    <MajorTitle :title="`${CORE.MAP.ALARM}详情`">
      <ShowStatus bind="alarmLevelId" :dict="ALARM_LEVEL" noLabel auto />
      <ShowStatus label="" bind="alarmResolveState" :dict="DEAL_STATUS" :labelWidth="16" auto />
    </MajorTitle>

    <EasyRow col3>
      <ShowText
        :label="`${CORE.MAP.ALARM}${CORE.MAP.ASSET}`"
        bind="alarmResName"
        :isBtn="[1, 2, 3, 4, 5].includes(one.alarmResType)"
        @click="openDetail"
      />
      <ShowTree :label="`${CORE.MAP.ALARM}${CORE.MAP.REGION}`" bind="areaId" :dict="CORE.REGION.DICT" allName />
      <ShowTime :label="`${CORE.MAP.ALARM}时间`" bind="alarmTime" />
    </EasyRow>

    <EasyRow col3>
      <ShowDict :label="`${CORE.MAP.ALARM}分组`" bind="subSystemId, subSystemName" :dict="$root.alarm_group_treeDict" />
      <ShowDict :label="`${CORE.MAP.ALARM}名称`" bind="alarmTypeId, alarmTypeName" :dict="$root.alarm_group_treeDict" />
      <ShowDict :label="`${CORE.MAP.ALARM}类型`" bind="alarmDictId, alarmDictName" :dict="CORE.DICT.alarm_type" />
    </EasyRow>

    <EasyRow col3>
      <ShowText v-if="CORE.MAP.VIDEO_IS_HIK && !CORE.isEmpty(one.cameraList)" label="关联视频">
        <BtnText v-for="item in one.cameraList" :key="item.id" :title="item.deviceName" @click="openCamera(item)" />
      </ShowText>
    </EasyRow>

    <ShowTextMulti :label="`${CORE.MAP.ALARM}详情`" bind="alarmDetail" multiRow />
    <ShowImage v-if="!CORE.isEmpty(one.imageList)" bind="imageList" pathKey="fileUrl" />
    <EasyRow v-if="!CORE.isEmpty(one.videoList)" col3>
      <ShowVideo bind="videoList" noLabel autoplay />
    </EasyRow>

    <!-- 纠正区域名称为全路径 -->
    <FormTree v-show="false" bind="areaId, areaName" :dict="CORE.REGION.DICT" allName />

    <EasyModal v-model="visbleCamera" title="关联视频" noFooter bgClose>
      <MajorTitle :title="camera.deviceName" />
      <div class="row10">
        <HkPlayer v-if="visbleCamera" :value="camera.thirdCode" :replayTime="one.alarmTime" replay />
      </div>
    </EasyModal>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'AlarmBase',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(
    require.context('@admin/components/CommonVideo', true, /vue$/),
    require.context('./', true, /vue$/),
  ),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      visbleCamera: false, // 录像弹窗可见
      camera: {}, // 录像对象
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 告警等级字典
     */
    ALARM_LEVEL() {
      return CORE.DICT.ALARM_LEVEL || []
    },

    /**
     * 处理状态字典
     */
    DEAL_STATUS() {
      return CORE.DICT.ALARM_RESOLVE_STATE.map(([id, ...other]) => [+id, ...other])
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 打开详情
     */
    openDetail() {
      const { one: { alarmResType, alarmResId }, DICT: { RES_TYPE } } = this
      const Name = CORE.dict(RES_TYPE, alarmResType, 2)
      CORE[`openDetail${Name}`](alarmResId)
    },

    /**
     * 打开录像
     */
    openCamera(item) {
      this.camera = item
      this.visbleCamera = true
    },
  },
}
</script>
